<!DOCTYPE html>
<html class="x-admin-sm">

<head>
<meta charset="UTF-8">
<title>欢迎页面-X-admin2.2</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
<link rel="stylesheet" href="./css/font.css">
<link rel="stylesheet" href="./css/xadmin.css">
<script src="./lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="./js/xadmin.js"></script>
<!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
</head>

<body>
	<div class="x-nav">
		<span class="layui-breadcrumb"> <a href="index.html">首页</a> <a
			href="">采购</a> <a> <cite>采购列表</cite></a>
		</span> <a class="layui-btn layui-btn-small"
			style="line-height: 1.6em; margin-top: 3px; float: right"
			onclick="location.reload()" title="刷新"> <i
			class="layui-icon layui-icon-refresh" style="line-height: 30px"></i>
		</a>
	</div>
	<div class="layui-fluid">
		<div class="layui-row layui-col-space15">
			<div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-card-body ">
						<form class="layui-form layui-col-space5">
							
							<div class="layui-inline layui-show-xs-block">
								<input type="text" name="departmentName" placeholder="请输入采购单位名"
									autocomplete="off" class="layui-input">
							</div>
							<div class="layui-inline layui-show-xs-block">
								<button class="layui-btn" lay-submit lay-filter="sreach">
									<i class="layui-icon">&#xe615;</i>
								</button>
							</div>
						</form>
					</div>
					<div class="layui-card-body ">
						<table class="layui-table" width="100%"
							lay-data="{url:'departmentSearch',page:true,toolbar: '#toolbarDemo',id:'queryTable'}"
							lay-filter="queryTable">
							<thead>
								<tr>
									<th lay-data="{type:'checkbox'}">ID</th>
									<th lay-data="{field:'id', width:80, sort: true}">编号(ID)</th>
									<th	lay-data="{field:'departmentName', width:120, sort: true, edit: 'text'}">采购单位名</th>
									<th lay-data="{templet: '#newsListBar'}">操作</th>
							</thead>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/html" id="toolbarDemo">
        <div class = "layui-btn-container" > 
			<button class = "layui-btn layui-btn-sm" lay-event = "addDepartment" ><i class="layui-icon">&#xe654;</i>添加采购单位</button>
			<button class = "layui-btn layui-btn-sm" lay-event = "delBatch" >批量删除</button>
            <button class = "layui-btn layui-btn-sm" lay-event = "getCheckData" > 获取选中行数据 </button>
            <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button > 
            <button class = "layui-btn layui-btn-sm" lay-event = "isAll" > 验证是否全选</button>
        </div > 
    </script>
<!--操作-->
<script type="text/html" id="newsListBar">
		<a class="layui-btn layui-btn-xs" id="edit" lay-event="edit">编辑</a>
		<a class="layui-btn layui-btn-xs " id="look" lay-event="look">详情</a>
		<a class="layui-btn layui-btn-xs layui-btn-danger" id="del" lay-event="del">删除</a>
	</script>

<script>
	layui.use('laydate', function() {
		var laydate = layui.laydate;
		//执行一个laydate实例
		laydate.render({
			elem : '#start' //指定元素
		});
		//执行一个laydate实例
		laydate.render({
			elem : '#end' //指定元素
		});
	});
</script>
<script>
	layui.use([ 'table', 'form', 'layer' ], function() {
		var table = layui.table;
		var form = layui.form;
		var layer = layui.layer;
		//查询

		form.on("submit(sreach)", function(data) {

			table.reload("queryTable", {
				page : {
					curr : 1
				//重新从第 1 页开始
				},
				where : {
					departmentName : $("input[name=departmentName]").val() //搜索的关键字
				}
			});
			return false;
		});
		//监听单元行
		table.on('tool(queryTable)', function(obj) {
			var layEvent = obj.event;
			var data = obj.data;
			if (layEvent == "edit") {
				edit(data);
			}else if(layEvent=="look") {
                look(data);
            }else if(layEvent=="del") {
                del(data);
            }
			event.stopPropagation();//阻止事件冒泡，防止多次执行
			//return false;
		});
		//再添加一个点击监听事件，防止因为按钮过多， 省略号隐藏的按钮没有事件
		table.on('row(queryTable)', function(obj) {
			var data = obj.data;
			$(document).on("click", "#edit", function(event) {
				edit(data);
				event.stopPropagation();//阻止事件冒泡，防止多次执行
				return false;
			});
            $(document).on("click","#look",function(){
                look(data);
                event.stopPropagation();//阻止事件冒泡，防止多次执行
                return false;
            });
            $(document).on("click","#del",function(){
                var d=[data];//封装成数组
                deleteAll(d);//
            });
			return false;
		});
		//打开新窗口编辑
		function look(data) {
			var id = data.id;
			alert(id+data.departmentName);

		}
        function edit(data) {
            var id = data.id;
            alert(id);
            xadmin.open('修改采购', './department-edit.html?' + id, 600, 400);

        }

		//监听单元格编辑
		table.on('edit(queryTable)', function(obj) {
			var value = obj.value //得到修改后的值
			, data = obj.data //得到所在行所有键值
			, field = obj.field; //得到字段
			layer.msg('[ID: ' + data.id + '] ' + field + ' 字段更改为：' + value);
		});

		//批量删除
		function deleteAll(data) {
			if (data.length == 0) {
				return;
			}
			var ids = [];
			for ( var i in data) {
				ids.push(data[i].id);
			}
			alert(ids);
			//
			layer.confirm('确定删除选中的用户？', {
				icon : 3,
				title : '提示信息'
			}, function(index) {
				$.getJSON("delALLDepartment", {
					ids : ids
				}, function(d) {
					if (d>0) {
                        layer.alert("删除成功");
						location.reload();
					} else {
						layer.alert("删除失败");
					}
				});
			})
		}

		//头工具栏事件
		table.on('toolbar(queryTable)', function(obj) {
			var checkStatus = table.checkStatus(obj.config.id);
			switch (obj.event) {
			case 'addDepartment':
				xadmin.open('添加用户', './department-add.html', 600, 400);
				break;
			//批量删除
			case 'delBatch':
				var data = checkStatus.data;
				layer.alert(JSON.stringify(data));
				deleteAll(data);
				break;
			case 'getCheckData':
				var data = checkStatus.data;
				layer.alert(JSON.stringify(data));
				break;
			case 'getCheckLength':
				var data = checkStatus.data;
				layer.msg('选中了：' + data.length + ' 个');
				break;
			case 'isAll':
				layer.msg(checkStatus.isAll ? '全选' : '未全选');
				break;
			}
            ;
        });
    });
</script>

</html>